<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%-- <%@ include file="../jsp/include/taglib.jsp"%> --%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title> 分享
		</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../css/icons-extra.css" />
        <link rel="stylesheet" type="text/css" href="../css/index.css" />
        <!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css"/>
		<link href="../css/mui.picker.css" rel="stylesheet" />
		<link href="../css/mui.poppicker.css" rel="stylesheet" />
		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.picker.js"></script>
		<script src="../js/mui.poppicker.js"></script>
		<script src="../js/city.data.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
		<style>
		.mui-icon-extra{font-size: 24px; display: block; margin-top: 5px; line-height: 18px;}
		#abc{
		opacity: 0;
		}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-table-view" style="box-shadow:none; border: none;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">北方图书城</h1>
			<a class="mui-icon  mui-icon-more-filled mui-pull-right"></a>
		</header>
		<!--上传图片-->
		<div>
			<div class="shar-bg">				
				<div><a href="#picture" id="imgbtn" style="padding: 5px 20px;"><img src="../images/chuan.png" width="80" height="80"></a></div>
			</div>			
		</div>
		<!--上传图片上拉内容-->
	<!-- 	 <div id="picture" class="mui-popover mui-popover-action mui-popover-bottom">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a id="imgbtn">拍照或选择已有照片</a>
					
				</li>
				
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#picture"><b>取消</b></a>
				</li>
			</ul>
		</div> -->
		<!--表单-->
		<div class="mui-table-view mui-table-view-chevron">
			<div class="mui-content-padded" style="margin: 5px;">								
				<form class="mui-input-group">
					<div class="mui-input-row" style="font-size: 14px;">
						<label>书名 :</label>
						<input type="text" placeholder="请填写" style="font-size: 14px;">
					</div>
					<div class="mui-input-row" style="font-size: 14px;">
						<label>分享人姓名 :</label>
						<input type="text" placeholder="请填写" style="font-size: 14px;">
					</div>
					<div class="mui-input-row" style="font-size: 14px;">
						<label>联系电话 :</label>
						<input type="text" placeholder="请填写" style="font-size: 14px;">
					</div>
					<div class="mui-button-row">
			            <button type="button" class="mui-btn mui-btn-warning" onclick="javascript:window.location.href='region2.html';">发布分享</button>&nbsp;&nbsp;
			             
					</div>
				</form>				
			</div>
		</div>
		<div>
		<input id = "abc" type="file" accept="image/*" >
		</div>
		
		 	    <script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		mui.init();
	
			/* var appId = "";
			var timestamp = "";
			var nonceStr = "";
			var signature = "";

			var url = window.location.href;
	
			mui.ajax('${pageContext.request.contextPath}/getwxconfig',{
				data:{
					"url": url		
				},
				dataType:'json',//服务器返回json格式数据
		
				type:'Get',//HTTP请求类型
				timeout:10000,//超时时间设置为10秒；
				success:function(data){
					 appId=data.appId;
					timestamp=data.timestamp;
					nonceStr=data.nonceStr;
					signature=data.signature;
					wx.config({
				   	    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				   	    appId: appId, // 必填，公众号的唯一标识
				   	    timestamp:timestamp, // 必填，生成签名的时间戳
				   	    nonceStr: nonceStr, // 必填，生成签名的随机串
				   	    signature: signature,// 必填，签名，见附录1
				   	    jsApiList: ['chooseImage','uploadImage','previewImage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
				   	}); 
				   
				},
				error:function(xhr,type,errorThrown){
					//异常处理； 
					console.log(type);
				}
				
			}); */
			
		
		
		/* var imagesPath = [];
		//选择图片
		document.getElementById("imgbtn").addEventListener('tap', function() {
			wx.chooseImage({
	          	success: function (res) {
	      alert("11111");
	          	}	
			   });
		}) */
	
		var btn = document.getElementById("abc"); 
		document.getElementById("imgbtn").addEventListener('tap', function() {
			btn.click();
		});
			
			
			
		
		mui('body').on('shown', '.mui-popover', function(e) {
			//console.log('shown', e.detail.id);//detail为当前popover元素
		});
		mui('body').on('hidden', '.mui-popover', function(e) {
			//console.log('hidden', e.detail.id);//detail为当前popover元素
		});

		mui('#' + parent.id).popover('toggle');
		
		
		</script>
	</body>
</html>
